<template>
	<view>
		<textscroll :list="list"/>
		<sexCompo ref="sex" :sex="sex" @chooseSex="chooseSex"></sexCompo>
		<button type="primary" @tap="showPrompt()">选择性别</button>
		<view class="page-body">
            <view class="page-section page-section-gap">
                <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
                </map>
            </view>
        </view>
		<view class="">
			
		</view>
		<view class="item" v-for="(value,index) in iconType" :key="index">
		    <icon :type="value" size="26"/>
		    <text>{{value}}</text>
		</view>
		<view class="">定位经度:{{heng}}</view>
		<view class="">定位纬度:{{shu}}</view>
		<view class="">定位地址:{{address}}</view>
		<view class="">选择地址:{{chooseAddress}}</view>
		<view class="">选择详细地址:{{choosexiangxi}}</view>
		<view class="">选择经度:{{chooseheng}}</view>
		<view class="">选择纬度:{{chooseshu}}</view>
		<button @tap="choose">选择位置</button>
		<button @tap="openLocation">打开位置</button>
		<view>
			<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
			<button type="primary" @click="takePhoto">拍照</button>
			<view>预览</view>
			<image mode="widthFix" :src="src"></image>
		</view>
	</view>
</template>

<script>
	
	import sexCompo from '../../../components/sex-compo/sex-compo.vue'
	import textscroll from '../../../components/textScroll/textScroll.vue'
	import amap from '../../../apis/amap-wx.js'
	
	export default {
		data() {
			return {
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png',
					width: 20,
					height: 20
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png',
					width: 20,
					height: 20
				}],
				heng: '',
				shu: '',
				address: '',
				chooseAddress: '',
				choosexiangxi: '',
				chooseheng: '',
				chooseshu: '',
				iconType: ['success'],
				src:"",
				sex: 1,
				amapPlugin: null,
				key: 'dbc9c5bdc6c906f78292d58fe854783a',
				list:['1分钟前，无夏购买了会员','2分钟前，无夏购买了会员','3分钟前，无夏购买了会员']
			}
		},
		onLoad() {
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
			uni.getLocation({
			    type: 'wgs84',
				geocode: true,
			    success: (res) => {
					this.heng = res.longitude;
					this.shu = res.latitude;
					this.address = res.address;
					console.log(res)
					uni.showLoading({
						title: '获取信息中'
					});
					this.amapPlugin.getRegeo({
						success: (data) => {
							console.log(data)
							this.address = data[0].name;
							uni.hideLoading();
						}
					});
			    },
				complete: (res) => {
					console.log(res)
				}
			});
			// #ifdef APP-PLUS|| MP-WEIXIN
			this.iconType = ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search','clear']
			// #endif
			// #ifdef MP-ALIPAY
			this.iconType = ['info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear', 'success', 'success_no_circle', 'loading']
			// #endif
			// #ifdef MP-BAIDU
			this.iconType = ['success', 'info', 'warn', 'waiting', 'success_no_circle', 'clear', 'search', 'personal', 'setting', 'top', 'close', 'cancel', 'download', 'checkboxSelected', 'radioSelected', 'radioUnselect']
			// #endif
		},
		methods: {
			showPrompt(){
				this.$refs.sex.show();
			},
			methods: {
				 takePhoto() {
					uni.createCameraContext().takePhoto({
						quality: 'high',
						success: (res) => {
							this.src = res.tempImagePath
						}
					});
				},
				error(e) {
					console.log(e.detail);
				}
			},
			choose(){
				uni.chooseLocation({
				    success: (res) => {
						this.chooseAddress = res.name;
						this.choosexiangxi = res.address;
						this.chooseheng = res.latitude;
						this.chooseshu = res.longitude;
				        console.log('位置名称：' + res.name);
				        console.log('详细地址：' + res.address);
				        console.log('纬度：' + res.latitude);
				        console.log('经度：' + res.longitude);
				    }
				});
			},
			openLocation(){
				uni.getLocation({
				    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				    success: (res) => {
				        const latitude = res.latitude;
				        const longitude = res.longitude;
				        uni.openLocation({
				            latitude: latitude,
				            longitude: longitude,
				            success: function () {
				                console.log('success');
				            }
				        });
				    }
				});
			}
		},
		components: {
			sexCompo,
			textscroll
		}
	}
</script>

<style>
	button{
		margin-top: 30upx;
	}
	.container {
		padding: 10px;
	}
	#editor {
		width: 100%;
		height: 300px;
		background-color: #CCCCCC;
	}
	button {
		margin-top: 10px;
	}
</style>
